<template>
  <el-row class="RangeDrawer">
    <commonDrawer
      title="公示范围"
      :drawer="drawer"
      :size="'600px'"
      :isShowMoreBtn="false"
      @closeDraw="closeDraw"
    >
      <template slot="column">
        <div class="range-area" v-loading="loading">
          <div class="company-name"><i class="company-logo V7_iconV7tubiao_qiye V7_iconfont"></i><span>{{company.name + '(' + company.total + ')'}}</span></div>
          <!-- <div class="search-bar">
            <el-input
              placeholder="输入关键字进行过滤"
              @keydown.enter.native="srarchNode"
              v-model="filterText">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="srarchNode"></i>
            </el-input>
          </div> -->
          <div class="search-content">
            <el-tree :data="data" :filter-node-method="filterNode" ref="tree" empty-text="">
              <span class="custom-tree-node" slot-scope="{ data }">
                <span v-html="data.label"></span>
                <span v-if="data.count > 0" style="padding-left:5px">({{ data.count }})</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="publicBtn">
          <el-button size="mini" @click="closeDraw">关闭</el-button>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator';
import commonDrawer from '@/common/views/drawer/index.vue';
import { treeResult } from './notice'
import { commonAction } from '@/utils/common';
const oriData = {
  name: '数据加载中...',
  total: 0
}
@Component({
  name: 'RangeDrawer',
  components: {
    commonDrawer
  }
})
export default class RangeDrawer extends Vue {
  @Ref() private readonly tree: any
  private drawer: boolean = false
  private data: any = []
  private filterText: string = ''
  private loading: boolean = false

  private company: any = { ...oriData }

  private async openDraw (data: any) {
    this.drawer = true;
    this.loading = true;
    try {
      const params = { url: '/base/action/notice/queryNoticeShowScope', method: 'POST', data: { id: data._id } }
      const result: any = await commonAction(params)
      if (result.success) {
        this.renderData(result.data)
      }
      this.loading = false
    } catch (e) {
      this.loading = false
    }
  }

  @Watch('$route')
  public close () {
    this.drawer = false;
  }

  private async renderData (data: any) {
    const res: any = await treeResult({
      role: data.role.split(',').filter(v => v !== ''),
      dept: data.dept.split(',').filter(v => v !== ''),
      user: data.user.split(',').filter(v => v !== ''),
      queue: data.queue.split(',').filter(v => v !== '')
    })
    this.data = res.children
    this.company.total = res.count
    this.company.name = res.label
  }

  private closeDraw () {
    this.drawer = false;
    this.data = []
    this.company = { ...oriData }
  }

  private filterNode (value: string, data: any) {
    if (!value) {
      return true
    }
    return data.label.indexOf(value) !== -1
  }

  private srarchNode () {
    this.tree.filter(this.filterText)
  }
}
</script>

<style lang="stylus" scoped>
.RangeDrawer
  >>> .el-tree-node__content
          height 40px
          color #303753
          line-height 40px
          font-weight 400
          &:hover
            background #F3FAFF
            border-radius 4px
  .range-area
    position absolute
    height calc(100% - 162px)
    width calc(100% - 48px)
    .company-name
      font-size 12px;
      font-family PingFang SC;
      font-weight 600;
      color #303753;
      padding-bottom 22px
      border-bottom 1px solid #ECF0F3
      .company-logo
        color $c-main
        border-radius 50%
        margin-right 10px
    .search-bar
      height 40px
    .search-content
      height calc(100% - 40px)
      overflow auto
  .publicBtn
    width calc(100% - 48px)
    background #333
    position absolute
    bottom 0px
    height 56px
    line-height 56px
    background #fff
    text-align right
    z-index 100
</style>
